<template>
  <div class="w-full h-screen overflow-hidden bg-blue-50 flex  flex-wrap text-center" >

      <!-- 标题 -->
      <div class="w-full absolute top-8" style="z-index:9999">
            <span class="sm:text-xl text-sm w-auto p-4 rounded-xl shadow-lg m-auto" style="background-color:rgb(92 110 231 / 80%);"  :class="`${mapType == 1?'text-white':'text-white'}`">
               嘉兴地区（市本级）疫情三区分布地图（ <router-link to="/pick">{{new Date(historyDate).Format("M月dd日")}}</router-link>）
            </span>
     </div>
      
  <!-- 地图容器 -->
        <div class="w-full md:w-full h-full md:h-screen "  id="tc_map" >

        </div>

<!-- 提示信息窗 -->
        <div id="info" class="bg-white shadow-md fixed top-6 w-11/12 left-4"  :class="`${infoBoxData.show?'block': 'hidden'}`">
            <div 
                class=" p-4  text-sm rounded-lg flex flex-col leading-loose" 
                :style="`background-color:${colors[infoBoxData.areaType].color}`" 
            >
                <div class="font-bold">{{infoBoxData.zoneTitle}}</div>
                <div class="text-lg">【{{AREANAME[infoBoxData.areaType]}}】{{infoBoxData.areaContent}} 
                    
                </div>
            <div class="text-sm my-4">管制时间：{{infoBoxData.activeDate}} ~ {{infoBoxData.disableDate}}</div>
            </div>
            <button @click="infoBoxData.show = false" class="absolute top-3 right-3 animate-bounce">
                关闭
            </button>
        </div>
<!-- 图例部分     -->
        <div class="transition-all md:w-96 md:right-4 absolute  md:top-56 w-full h-auto flex-grow  grid grid-cols-1 divide-y gap-y-2" :class="{hide_menu:!flagHide,show_menu:flagHide}" style="z-index:1000;max-height: 35rem;">
            <div class="w-full ">
                 <div class="md:w-full w-auto bg-white text-center m-2 p-4 rounded-lg shadow-md">
                    <div class="w-full block md:hidden transform relative -top-4" :class="{rotateX:flagHide}">
                            <!-- 隐藏菜单 -->
                            <svg @click="hideMenu()" class="m-auto icon animate-bounce" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2930" width="32" height="32"><path d="M511.29 230.03L867.8 544.02l56.4-64.04-413.02-363.76L99.74 480.04l56.52 63.92z" p-id="2931" fill="#13227a"></path><path d="M99.74 817.1l56.52 63.93L511.29 567.1 867.8 881.09l56.4-64.04-413.02-363.76z" p-id="2932" fill="#13227a"></path></svg>
                    </div>
                     <div class="flex items-center justify-evenly">  
                         <span>
                             <input type="radio" class=" text-blue-500 border-2" name="mapType" v-model="mapType" value=0 />明亮
                          </span>
                         <span>
                             <input type="radio" class=" text-blue-500 border-2" name="mapType" v-model="mapType" value=1 />暗黑
                        </span>
                         
                         <div class="inline-flex items-center   active:animate-ping" @click="geolocation.getLocation(showPosition, showErr, options);flagLoacation = false;">
                             <svg t="1648795367333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4662" width="32" height="32"><path d="M512 512a136.533333 136.533333 0 1 1 136.533333-136.533333 136.533333 136.533333 0 0 1-136.533333 136.533333z m0-219.272533a81.92 81.92 0 1 0 81.92 81.92 81.92 81.92 0 0 0-81.92-81.92z" fill="#0073FF" p-id="4663"></path><path d="M512 831.214933a27.306667 27.306667 0 0 1-19.2512-8.055466l-214.493867-214.357334a330.5472 330.5472 0 1 1 467.490134 0l-214.357334 214.357334a27.306667 27.306667 0 0 1-19.387733 8.055466z m0-732.091733a275.933867 275.933867 0 0 0-195.106133 471.04L512 765.269333l195.106133-195.106133A275.933867 275.933867 0 0 0 512 99.1232z" fill="#0073FF" p-id="4664"></path><path d="M514.321067 979.490133c-147.456 0-306.107733-37.000533-306.107734-118.3744 0-45.602133 51.746133-81.92 145.681067-102.4a27.306667 27.306667 0 1 1 11.605333 53.384534c-78.370133 17.066667-102.673067 41.915733-102.673066 49.015466 0 18.432 88.064 63.761067 251.4944 63.761067s251.4944-45.192533 251.4944-63.761067c0-7.3728-25.258667-32.768-106.496-49.834666a27.306667 27.306667 0 1 1 11.195733-53.384534c96.6656 20.343467 150.186667 56.9344 150.186667 103.2192-0.273067 80.964267-158.9248 118.3744-306.3808 118.3744z" fill="#0073FF" p-id="4665"></path></svg>
                             <span class="block text-xs">定位</span>
                             <!-- 等待动画 -->
                             <div class="w-8 h-4 inline-flex items-center justify-between " :class="{invisible:flagLoacation}" >
                                <div class="w-2 h-2 bg-blue-600 rounded-lg" id="object_one"></div>
                                <div class="w-2 h-2 bg-blue-600 rounded-lg" id="object_two"></div>
                                <div class="w-2 h-2 bg-blue-600 rounded-lg" id="object_three"></div>
                            </div>
                            
                        </div>
                        <span class="text-xs"></span><input type="date" class="text-xs" v-model="historyDate">
                      </div>
                      <div class="w-full flex justify-between p-4">
                        <span>图例:</span>
                        <div v-for="(item,index) in colors" :key="index"  >
                            <div class="p-1 text-sm" :style="`background-color:${item.color}`">
                                {{AREANAME[index]}}
                            </div>
                            <span>{{contActiveArea(store.zoneList.filter(el =>{return checkWithInDateArray(el.AreaList , serverTime) > 0}),index, serverTime)}}</span>
                        </div >
                      </div >
                     <div class="text-lg font-extrabold "></div >
                     <ul v-if="store.zoneList.filter(el =>{return checkWithInDateArray(el.AreaList , serverTime) > 0}).length" class="h-96 overflow-auto">
                         <li class="grid grid-cols-3  my-4 text-center">
                             <span>名称</span>
                             <span>管制区域</span>
                             <span>信息来源</span>
                         </li>
                         
                         <li v-for="(item) in store.zoneList.filter(el =>{return checkWithInDateArray(el.AreaList , serverTime) > 0})"  :key="item.id" class="grid grid-cols-3 my-6 text-center  active:text-md">
                             <span title="点击展开" class="w-40 text-left cursor-pointer active:bg-sky-200 hover:bg-sky-200"  @click="moveToCenter(item.center);toggle(item.id)">{{item.title}}</span >
                             <span >{{checkWithInDateArray(item.AreaList , serverTime)}}</span >
                             <span title="点击跳转" v-if="item.url.length" class="hover:bg-yellow-100">
                                 <a :href="item.url" target="_blank" >
                                     <svg t="1648865253468" class="icon m-auto " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2220" width="32" height="32"><path d="M904 176H120c-30.9 0-56 25.1-56 56v560c0 30.9 25.1 56 56 56h784c30.9 0 56-25.1 56-56V232c0-30.9-25.1-56-56-56z m0 616H120V232h784v560z" p-id="2221" fill="#1296db"></path><path d="M232 736h168c30.9 0 56-25.1 56-56V512c0-30.9-25.1-56-56-56H232c-30.9 0-56 25.1-56 56v168c0 30.9 25.1 56 56 56z m0-224h168v168H232V512zM204 372h616c15.5 0 28-12.5 28-28s-12.5-28-28-28H204c-15.5 0-28 12.5-28 28s12.5 28 28 28zM820 456H540c-15.5 0-28 12.5-28 28s12.5 28 28 28h280c15.5 0 28-12.5 28-28s-12.5-28-28-28zM820 568H540c-15.5 0-28 12.5-28 28s12.5 28 28 28h280c15.5 0 28-12.5 28-28s-12.5-28-28-28zM820 680H540c-15.5 0-28 12.5-28 28s12.5 28 28 28h280c15.5 0 28-12.5 28-28s-12.5-28-28-28z" p-id="2222" fill="#1296db"></path></svg>
                                 </a>
                                 </span >
                                 <span v-else>-</span>
                             <div v-if="item.AreaList.length" :id="item.id" style="display:none" class=" col-span-3 bg-blue-50 text-black pl-4">
                                 <div v-for="(el,index) in item.AreaList" :key="index" class=" flex w-full justify-evenly my-2 py-1 text-sm rounded-md items-center" :style="`background-color:${colors[el.areaType].color}`">
                                        <!-- <span>{{index + 1}}</span> -->
                                        <span class="w-36">{{el.content}}</span >
                                        <!-- <span>{{AREANAME[el.areaType]}}</span> -->
                                        <span class="text-xs">{{el.activeDate}} <br/> ~{{el.disableDate}}</span>
                                        <div v-if="!checkWidthInDate(el.activeDate, el.disableDate ,serverTime)" class="text-white">
                                            <span class="bg-gray-400 text-white">解封/管制期外</span> 
                                        </div>
                                </div>
                             </div>
                             
                         </li>
                     </ul>
                     <div class="h-48 my-10" v-else>
                         {{historyDate}}
                         <br>
                         无管控区
                         </div>

                 </div>
               
            </div>
        
        </div>

       
  </div>
</template>

<script setup>
import { onMounted, nextTick, reactive, computed ,ref, toRefs, watch } from 'vue';
import Clipboard from 'clipboard';
 //地图初始化函数，本例取名为init，开发者可根据实际情况定义
 let map = null;
 let  markerLayer = null;
 let polygon = null;

 // 总的对象
let store = reactive(
    {
        zoneList:[]
    }
)




//当前编辑区域的一个响应式对象
let state= reactive({
    positionIndex:null,
    positionList:[],
    areaType:3,
    content:'' ,//区域的文字描述
    activeDate:'',
    disableDate: ''

})




const AREANAME = [
    '封控区' , "管控区" , '防范区' , '临时管制区'
]

  //调色盘
let colors = [
    {
        color: 'rgba(225,54,17,0.8)',//封控 红色
        borderColor: '#999'
    },
    {
        color: 'rgba(243, 239, 8 ,0.6)',//管控 黄色
        borderColor: '#999'
    },
    {
        color: 'rgba(10, 25, 147 ,0.2)',//防范区 蓝色
        borderColor: '#999'
    },
    {
        color: 'rgba(229, 133, 20 ,0.6)',//临时管制 橙色
        borderColor: '#999'
    },
]

// 地图显示模式
let mapType = ref(1)

//定位中？
let flagLoacation = ref(true)

// 隐藏菜单？
let flagHide = ref(false)

//变量： 历史日期
let historyDate = ref((new Date()).Format("yyyy-MM-dd"))

//变量： 多边形id数组，主要是为了清空多边形，目前来看，必须要Id
let polygonIdList = []


// 变量定义: 服务器时间，这里默认是浏览器当前时间
let serverTime = ref(0);

// 监听历史日期变更
watch(()=>historyDate.value,
(newVal, oldVal)=>{
    
    // 这里需要将新的日期赋值到serverTime时间戳
    serverTime.value = new Date(newVal).getTime() + 1000*3600*12
    // console.log('历史日期变更，重新绘制地图',newVal,serverTime.value)

    showAllZone()
})

// 方法： 计算有效的某类区域的数量
// 参数：activeArea 有效区域数组  areaType 区域类型  serverTime 服务器时间，如果选择历史日期，则变更为历史日期
let contActiveArea = (activeArea = [] , areaType = 0 , serverTime = 0)=> {
    if(!activeArea.length){
        return null
    }

    // 先拍平
    let xx = [].concat(...activeArea.map(el=>el.AreaList))
    // 然后筛选数量，这里注意需要在选定管控期内
    return xx.filter(ele => ele.areaType == areaType && checkWidthInDate(ele.activeDate, ele.disableDate, serverTime )).length
}

// 方法： 隐藏、显示菜单
let hideMenu = () =>{
    flagHide.value = !flagHide.value
}

// 监控地图类型
watch(()=>mapType.value,
    (newVal,oldVal) => {
       
        let style = newVal == 1?'style2' : 'style1'
        //  console.log(newVal,style)
        map.setMapStyleId(style)
    }
)

// 方法： 初始化地图
 let initMap = ()=> {
            //定义地图中心点坐标
            var center = new TMap.LatLng(30.735708,120.740018)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
             map = new TMap.Map(document.getElementById('tc_map'), {
                center: center,//设置地图中心点坐标
                zoom: 12,   //设置地图缩放级别
                 mapStyleId: `${mapType.value?'style2' : 'style1' }`,
                pitch: 43.5,  //设置俯仰角
                //rotation: 0
                    //设置地图旋转角度
            });
            //Map实例创建后，通过on方法绑定点击事件
                map.on("click",clickHandler)

        //创建并初始化MultiMarker
        //在地图初始化的时候添加点图层
        markerLayer = new TMap.MultiMarker({
            map: map,  //指定地图容器
            //样式定义
            styles: {
                //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                "myStyle": new TMap.MarkerStyle({ 
                    "width": 25,  // 点标记样式宽度（像素）
                    "height": 35, // 点标记样式高度（像素）
                    //"src": '../img/marker.png',  //图片路径
                    //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }  ,
                    color: '#333', // 标注点文本颜色
                    size: 12, // 标注点文本文字大小
                    direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
                    offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                    strokeColor: '#fff', // 标注点文本描边颜色
                    strokeWidth: 1, // 标注点文本描边宽度
                }) ,
                "myStyle-blue": new TMap.MarkerStyle({ 
                    "width": 25,  // 点标记样式宽度（像素）
                    "height": 35, // 点标记样式高度（像素）
                    //"src": '../img/marker.png',  //图片路径
                    //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }  ,
                    color: '#333', // 标注点文本颜色
                    size: 16, // 标注点文本文字大小
                    direction: 'top', // 标注点文本文字相对于标注点图片的方位
                    offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                    strokeColor: '#fff', // 标注点文本描边颜色
                    strokeWidth: 2, // 标注点文本描边宽度
                }) ,
            },
            //点标记数据数组
            geometries: [
            ]
        });

    //    这里特意添加了多个图层，可以显示不同的颜色
    // 最下面是临时管制区
    // 其次是防范区
    // 其次是管控区
    // 最后是封闭区
       polygon= new TMap.MultiPolygon({
            id: 'polygon-layer', //图层id
            map: map, //设置多边形图层显示到哪个地图实例中
            //多边形样式
            zIndex:10,
            styles: {
                'polygon-0': new TMap.ExtrudablePolygonStyle({
                    'color': colors[0].color, //面填充色
                    'showBorder':true, //是否显示拔起面的边线
                    'borderColor': colors[0].borderColor, //边线颜色
                    "extrudeHeight": 20
                }),
                // 'polygon-1': new  TMap.ExtrudablePolygonStyle({
                //     'color': colors[1].color, //面填充色
                //     'showBorder':true, //是否显示拔起面的边线
                //     'borderColor': colors[1].borderColor ,//边线颜色
                //     "extrudeHeight": 100
                // }),
                'polygon-2': new  TMap.ExtrudablePolygonStyle({
                    'color': colors[2].color, //面填充色
                    'showBorder':true, //是否显示拔起面的边线
                    'borderColor': colors[2].borderColor, //边线颜色
                    "extrudeHeight": 10
                }),
                //这是平面
                // 'polygon-0': new TMap.PolygonStyle({
                //     'color': colors[0].color, //面填充色
                //     'showBorder':true, //是否显示拔起面的边线
                //     'borderColor': colors[0].borderColor //边线颜色
                // }),
                'polygon-1': new TMap.PolygonStyle({
                    'color': colors[1].color, //面填充色
                    'showBorder':true, //是否显示拔起面的边线
                    'borderColor': colors[1].borderColor //边线颜色
                }),
                //  'polygon-2': new TMap.PolygonStyle({
                //     'color': colors[2].color, //面填充色
                //     'showBorder':true, //是否显示拔起面的边线
                //     'borderColor': colors[2].borderColor, //边线颜色
                //     borderDashArray:[10, 10]
                // }),
                'polygon-3': new  TMap.ExtrudablePolygonStyle({
                    'color': colors[3].color, //面填充色
                    'showBorder':true, //是否显示拔起面的边线
                    'borderColor': colors[3].borderColor, //边线颜色
                    "extrudeHeight": 40
                }),
            },
            geometries: [
            ]
        })

         polygon.on('click', polygonEventClick);

}


// 方法： 定位
 var geolocation = new qq.maps.Geolocation("6QEBZ-MQVL4-YL5UR-DS3J3-76FOT-CRFTD", "test-key");
 var options = {timeout: 5000};
function showPosition(position) {
    flagLoacation.value = true;
    alert('定位成功')
   console.log(position)
   markerLayer.setGeometries([{
    "id": "my-posotion",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
    "styleId": 'myStyle',  //指定样式id
    "position": new TMap.LatLng(position.lat,position.lng),  //点标记坐标位置
    "content": "我的位置" ,
    "properties": {//自定义属性
        "title": "" 
        }
    }])
    //移动到所在位置
    moveToCenter([position.lat,position.lng])
};

function showErr() {
    console.log('定位失败')
    flagLoacation.value = true;
    alert('定位失败')
    return false;
};

//当前经纬度
let nowLatLng = ref('')
let nowLatLngArray = ref([0 , 0])

let markerArray = ()=>{
   return  state.positionList.map((el, index) => {
      return {
           "id": ""+(index+1),   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle',  //指定样式id
            "position": new TMap.LatLng(...el.latLng),  //点标记坐标位置
            "content": "" + (index +1 )
      } 
    });
}

//方法： 地图上标点定义事件处理方法
var clickHandler=function(evt){
    var lat = evt.latLng.getLat().toFixed(8);
    var lng = evt.latLng.getLng().toFixed(8);
    // console.log("您点击的的坐标是："+ lat + "," + lng);
    // 点击之后，将点击处坐标赋值给当前点变量
    nowLatLng.value = lat + "," + lng;
    nowLatLngArray.value = [lat , lng]
    // markerLayer.updateGeometries([
    //     {
    //          "id": "pointer",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
    //         "styleId": 'myStyle-blue',  //指定样式id
    //         "position": new TMap.LatLng(lat, lng),  //点标记坐标位置
    //         "content": "" ,
    //     }
    // ])
}

//显示窗口的控制变量
let infoBoxData = reactive({
    show: false,
    areaType:0,
    zoneId:'',
    zoneTitle:'',
    areaContent:'',
    activeDate:'',
    disableDate: ''
})

// 方法：图形点击事件
var polygonEventClick = function (res) {
    var res = res && res.geometry;
    if (res) {
    // var infoDom = document.getElementById('info');
    // infoDom.style.display = 'block';
    let {  title, content, activeDate, disableDate, areaType} = res.properties
    infoBoxData.show = true

    infoBoxData.zoneTitle = title
    infoBoxData.areaContent = content
    infoBoxData.activeDate = activeDate
    infoBoxData.disableDate = disableDate
    infoBoxData.areaType = areaType
    
    }
};

// 方法： 加载所有区域
let showAllZone = () => {

    // 重新搞一个数组，去掉没用的，加上需要的信息，然后重新排序，防范区放最底下
    let areaListNew = [];


    // 根据id清除
    polygonIdList.forEach(el => {
        polygon.remove(el)
    })
    
    polygonIdList = [];



  store.zoneList.forEach(zoneItem => {
      //第一层循环，获取到每一个点位
        if(!zoneItem.AreaList.length){
          return false;
          //该点位区域为0，则直接返回
        }
        // let areaListNew = zoneItem.AreaList.sort((a,b) =>{
        //     return   b.areaType - a.areaType
        // })
        zoneItem.AreaList.forEach((areaItem,areaIndex) => {
            //第二层循环， 获取到点位的每一个区域

            //如果当前服务器时间不在有效时间段内，那么该区域视为已经解除封控或者还未开始封控，做不显示处理
            if(!checkWidthInDate(areaItem.activeDate , areaItem.disableDate , serverTime.value)){
                return false
            }
            //  console.log('checkWidthInDate',serverTime,areaItem.activeDate,areaItem.disableDate ,checkWidthInDate(areaItem.activeDate , areaItem.disableDate))
            if(!areaItem.positionList.length || areaItem.positionList.length < 3){
              return false;
              //该区域坐标没有或者少于3个
            }

            //这里。认为数据满足条件，可以渲染
            areaListNew.push({
                id: zoneItem.id,
                title: zoneItem.title,
                center: zoneItem.center,
                content: areaItem.content,
                activeDate: areaItem.activeDate,
                disableDate: areaItem.disableDate,
                positionList: areaItem.positionList,
                areaType: areaItem.areaType
            })
        })

        // console.log('绘制完成')
  });

//   新数组按照区域类型进行排序，一切工作都是为了这个
     areaListNew = areaListNew.sort((a, b) => {
         return   b.areaType - a.areaType
     })

  //对新数组进行绘制
     areaListNew.forEach((areaItem, areaIndex) => {
         //  画图步骤1：构造出路径数组
            let path = areaItem.positionList.map(el =>{
              return new TMap.LatLng(...el.latLng)
            })
            // console.log(areaItem.areaType,areaIndex)
            //  画图步骤2：调用曲线更新方法
            // 记录下Id,便于后面清空
            polygonIdList.push(areaItem.id+'-'+areaIndex)

            polygon.updateGeometries([{
                "id":areaItem.id+'-'+areaIndex,
                "styleId": 'polygon-'+areaItem.areaType,
                "paths": path,
                rank: areaIndex,
                properties: {
                // 多边形的属性数据
                    title: areaItem.title,
                    content:areaItem.content,
                    activeDate:areaItem.activeDate,
                    disableDate: areaItem.disableDate,
                    areaType: areaItem.areaType
                },
            }])
     })


   
}

// 方法： 折叠区域详情
let toggle = (zoneId) => {
    // console.log(document.getElementById(zoneId).style.display)
    if(document.getElementById(zoneId).style.display != 'none'){
        document.getElementById(zoneId).style.display = 'none'
    }else{
        document.getElementById(zoneId).style.display = 'block'
    }
    
}

// 方法： 移动坐标点到地图中间
let moveToCenter = (center)=>{
    
     map.panTo(new TMap.LatLng(...center))
    setTimeout(()=>{
          
           map.pitchTo(10);
            setTimeout(()=>{
                  map.zoomTo(14);
            },500)
    }, 300)
}


// 方法：传入起始日期和结束日期，以及当前服务器时间，判断是否在区间內部，如果在，返回true,否则false
let checkWidthInDate = (startDateStr = '',endDateStr = '' ,serverTimeArg = 0) => {
    //如果没有结束日期，字面上我们理解之后任何时间都是有效的，只要服务器时间大于开始时间就返回true
    if(startDateStr.length && !endDateStr.length){
        if(serverTimeArg >= new Date(startDateStr).getTime()){
            return true
        }else{
            return false;
        }
    }
    
    //如果没有起始日期，我们理解为，在结束日期之前都是有效的，返回true，否则false
    if(!startDateStr.length && endDateStr.length){
        if(serverTimeArg <= new Date(endDateStr).getTime()){
            return true;
        }else{
            return false;
        }
    }

    //如果开始结束日期都存在，那么判断服务器时间在不在两者中间
    if(startDateStr != ''  && endDateStr != ''){
        // console.log('进入判断时间方法，参数都正确')
        // console.log(serverTimeArg >= new Date(startDateStr).getTime() && serverTimeArg <= new Date(endDateStr).getTime())
        if(serverTimeArg >= new Date(startDateStr).getTime() && serverTimeArg <= (new Date(endDateStr).getTime() +3600*1000*24) ){
            return true;
        }
        else {
            return false;
        }
    }
    
    //开始结束都是空字符串，直接返回false
    return false
}

// 方法： 检查area数组中有几块区域是有效区域，即仍在管制时间内
let checkWithInDateArray = (areaList = [] ,serverTimeArg = 0 ) => {
    if(!areaList.length){
        return 0
    }

    let count = 0;
    areaList.forEach(el => {
        if(checkWidthInDate(el.activeDate , el.disableDate , serverTimeArg)){
            count++
        }
    });
    return count
}



onMounted(()=>{
    nextTick(() => {
    // ...
   
   initMap()
   fetch('./config.json', {
       credentials: 'omit',
       cache: 'no-store'
   }).then(res => {
       
        //第一次 将serverTime赋值给historyTime，表示默认为当前日期
        serverTime.value = new Date(res.headers.get('Date')).getTime()
        
        //判断白天还是晚上
        let hours = new Date(res.headers.get('Date')).getHours();
        if(hours >= 6 && hours <= 18){
            mapType.value = 0
        }
        historyDate.value = (new Date(serverTime.value)).Format("yyyy-MM-dd");
        // console.log('fetch',serverTime.value)
           return  res.json()
     })
    .then(res =>{
        console.log(res)
      

        store.zoneList  = res.zoneList.sort((a ,b) => {
            return   b.rank - a.rank
        })
        showAllZone()
    })
   
  })
   
})
</script>

<style scoped>
#info {
       
        z-index: 9999;
    }
#object_one {
    -webkit-animation: object 1.5s infinite;
    animation: object 1.5s infinite;
}
#object_two {
    -webkit-animation: object 1.5s infinite;
    animation: object 1.5s infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
#object_three {
    -webkit-animation: object 1.5s infinite;
    animation: object 1.5s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
@keyframes object {
  75% { 
    transform: scale(0);
    -webkit-transform:  scale(0);
  }

}
.rotateX{
    transform: rotateX(180deg);
}
.hide_menu{
    bottom: -25rem;
}
.show_menu{
    bottom:0
}
.invisible{
    visibility: hidden;
}
</style>